<template>
<!DOCTYPE html>
<html>
  <body>
    <!-- HEADER -->
    <header>
      <!-- TOP HEADER -->
      <div id="top-header">
        <div class="container">
          <ul class="header-links pull-left">
            <li><a href="#"><i class="fa fa-phone"></i> +0755-88666666</a></li>
            <li><a href="#"><i class="fa fa-envelope-o"></i> Apple@Apple.com</a></li>
            <li><a href="#"><i class="fa fa-map-marker"></i> 深圳市南山区粤兴五道66号</a></li>
          </ul>

          <ul class="header-links pull-right" v-if="cookie == ''">
            <li><a href="#"><i class="fa fa-dollar"></i> USD</a></li>
            <li><a href="#"><i class="fa fa-user-o"></i><router-link :to="{ path:'/Login'}"> 登录</router-link></a></li>
          </ul>
          <ul class="header-links pull-right" v-else>
            <li><a href="#"><i class="fa fa-dollar"></i> {{this.cookie}}</a></li>
            <li><a href="#" @click='delUsername()'><i class="fa fa-user-o "></i> 退出</a></li>
          </ul>
        </div>
      </div>
      <!-- /TOP HEADER -->

      <!-- MAIN HEADER -->
      <div id="header">
        <!-- container -->
        <div class="container">
          <!-- row -->
          <div class="row">
            <!-- LOGO -->
            <div class="col-md-3">
              <div class="header-logo">
                <a href="#" class="logo">
                  <img src="../../assets/img/logo.png" alt="">
                </a>
              </div>
            </div>
            <!-- /LOGO -->

            <!-- SEARCH BAR -->
            <div class="col-md-6">
              <div class="header-search">
                <form>
                  <select class="input-select">
                    <option value="0">所有苹果</option>
                    <option value="1">新鲜苹果</option>
                    <option value="2">特价苹果</option>
                  </select>
                  <input class="input" placeholder="蛇果 | 青苹果 | 红富士 | 红星 | 金冠">
                  <button class="search-btn">搜索</button>
                </form>
              </div>
            </div>
            <!-- /SEARCH BAR -->

            <!-- ACCOUNT -->
            <div class="col-md-3 clearfix">
              <div class="header-ctn">
                <!-- Wishlist -->
                <div>
                  <a href="#">
                    <i class="fa fa-heart-o"></i>
                    <span>心愿单</span>
                    <div class="qty">2</div>
                  </a>
                </div>
                <!-- /Wishlist -->

                <!-- Cart -->
                <div class="dropdown">
                  <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
                    <i class="fa fa-shopping-cart"></i>
                    <span>购物车</span>
                    <div class="qty">3</div>
                  </a>
                  <div class="cart-dropdown">
                    <div class="cart-list">
                      <div class="product-widget">
                        <div class="product-img">
                          <img src="../../assets/img/Apple04.png" alt="">
                        </div>
                        <div class="product-body">
                          <h3 class="product-name"><a href="">红富士</a></h3>
                          <h4 class="product-price"><span class="qty">1x</span>￥980.00</h4>
                        </div>
                        <button class="delete"><i class="fa fa-close"></i></button>
                      </div>

                      <div class="product-widget">
                        <div class="product-img">
                          <img src="../../assets/img/Apple03.png" alt="">
                        </div>
                        <div class="product-body">
                          <h3 class="product-name"><a href="">青苹果</a></h3>
                          <h4 class="product-price"><span class="qty">3x</span>￥9980.00</h4>
                        </div>
                        <button class="delete"><i class="fa fa-close"></i></button>
                      </div>
                    </div>
                    <div class="cart-summary">
                      <small>您选择了4个商品</small>
                      <h5>总计: ￥2940.00</h5>
                    </div>
                    <div class="cart-btns">
                      <a href="#">查看购物车</a>
                      <a href="#">结算<i class="fa fa-arrow-circle-right"></i></a>
                    </div>
                  </div>
                </div>
                <!-- /Cart -->

                <!-- Menu Toogle -->
                <div class="menu-toggle">
                  <a href="#">
                    <i class="fa fa-bars"></i>
                    <span>Menu</span>
                  </a>
                </div>
                <!-- /Menu Toogle -->
              </div>
            </div>
            <!-- /ACCOUNT -->
          </div>
          <!-- row -->
        </div>
        <!-- container -->
      </div>
      <!-- /MAIN HEADER -->
    </header>
    <!-- /HEADER -->
    <nav id="navigation">
      <!-- container -->
      <div class="container">
        <!-- responsive-nav -->
        <div id="responsive-nav">
          <!-- NAV -->
          <ul class="main-nav nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">热卖</a></li>
            <!--<li><a href="#">Categories</a></li>-->
            <!--<li><a href="#">Laptops</a></li>-->
            <!--<li><a href="#">Smartphones</a></li>-->
            <!--<li><a href="#">Cameras</a></li>-->
            <!--<li><a href="#">Accessories</a></li>-->
          </ul>
          <!-- /NAV -->
        </div>
        <!-- /responsive-nav -->
      </div>
      <!-- /container -->
    </nav>
    <!-- /NAVIGATION -->

    <!-- SECTION -->
    <div class="section">
      <!-- container -->
      <div class="container">
        <!-- row -->
        <div class="row">
          <!-- shop -->
          <div class="col-md-4 col-xs-6">
            <div class="shop" style="z-index:1000;">
              <div class="shop-img">
                <img src="../../assets/img/hot_selling01.png" alt="">
              </div>
              <div class="shop-body">
                <h3>红富士</h3>
                <router-link to="/buy?id=Apple04">立即购买<i class="fa fa-arrow-circle-right"></i></router-link>
                <router-view></router-view>
              </div>
            </div>
          </div>
          <!-- /shop -->

          <!-- shop -->
          <div class="col-md-4 col-xs-6">
            <div class="shop"style="z-index:1000;">
              <div class="shop-img">
                <img src="../../assets/img/hot_selling02.png" alt="">
              </div>
              <div class="shop-body">
                <h3>蛇果</h3>
                <router-link to="/buy?id=Apple01">立即购买<i class="fa fa-arrow-circle-right"></i></router-link>
              </div>
            </div>
          </div>
          <!-- /shop -->

          <!-- shop -->
          <div class="col-md-4 col-xs-6">
            <div class="shop"style="z-index:3;">
              <div class="shop-img">
                <img src="../../assets/img/hot_selling03.png" alt="">
              </div>
              <div class="shop-body">
                <h3>青苹果</h3>
                <router-link to="/buy?id=Apple02">立即购买<i class="fa fa-arrow-circle-right"></i></router-link>
              </div>
            </div>
          </div>
          <!-- /shop -->
        </div>
        <!-- /row -->
      </div>
      <!-- /container -->
    </div>
    <!-- /SECTION -->

    <!-- SECTION -->
    <div class="section">
      <!-- container -->
      <div class="container">
        <!-- row -->
        <div class="row">

          <!-- section title -->
          <div class="col-md-12">
            <div class="section-title">
              <h3 class="title">新品种</h3>
              <div class="section-nav">
                <ul class="section-tab-nav tab-nav">
                  <li class="active"><a data-toggle="tab" href="#tab1">新疆</a></li>
                  <li><a data-toggle="tab" href="#tab1">甘肃</a></li>
                  <li><a data-toggle="tab" href="#tab1">云南</a></li>
                  <li><a data-toggle="tab" href="#tab1">山东</a></li>
                  <li><a data-toggle="tab" href="#tab1">陕西</a></li>
                </ul>
              </div>
            </div>
          </div>
          <!-- /section title -->

          <!-- Products tab & slick -->
          <div class="col-md-12">
            <div class="row">
              <div class="products-tabs">
                <!-- tab -->
                <div id="tab1" class="tab-pane active ">
                  <div class="products-slick" data-nav="#slick-nav-1" v-for="data in datas">

                    <!-- product -->
                    <div class="product col-md-3">
                      <div class="product-img">
                        <img :src="require(`../../assets/img/${data.id}.png`)" alt="">
                        <div class="product-label">
                          <span class="sale">3折</span>
                          <span class="new">NEW</span>
                        </div>
                      </div>
                      <div class="product-body">
                        <p class="product-category">{{data.color}}</p>
                        <h3 class="product-name"><a href="#"><router-link :to="{ path:'/info',query: { Id:data.id}}">{{data.name}}</router-link></a></h3>
                        <h4 class="product-price">$88.00/吨 <del class="product-old-price">$98.00/吨 </del></h4>
                        <div class="product-rating">
                          <i class="fa fa-star"></i>
                          <i class="fa fa-star"></i>
                          <i class="fa fa-star"></i>
                          <i class="fa fa-star"></i>
                          <i class="fa fa-star"></i>
                        </div>
                        <div class="product-btns">
                          <button class="add-to-wishlist"><i class="fa fa-heart-o"></i><span class="tooltipp">add to wishlist</span></button>
                          <button class="add-to-compare"><i class="fa fa-exchange"></i><span class="tooltipp">add to compare</span></button>
                          <button class="quick-view"><i class="fa fa-eye"></i><span class="tooltipp">quick view</span></button>
                        </div>
                      </div>
                      <div class="add-to-cart">
                        <button class="add-to-cart-btn" @click="getBuy(data.id)"><i class="fa fa-shopping-cart"></i> 点击购买</button>
                      </div>
                    </div>
                    <!-- /product -->

                   
                  </div>
                  <div id="slick-nav-1" class="products-slick-nav"></div>
                </div>
                <!-- /tab -->
              </div>
            </div>
          </div>
          <!-- Products tab & slick -->
        </div>
        <!-- /row -->
      </div>
      <!-- /container -->
    </div>
    <!-- /SECTION -->

    <!-- HOT DEAL SECTION -->
    <div id="hot-deal" class="section">
      <!-- container -->
      <div class="container">
        <!-- row -->
        <div class="row">
          <div class="col-md-12">
            <div class="hot-deal">
              <ul class="hot-deal-countdown">
                <li>
                  <div>
                    <h3>02</h3>
                    <span>天</span>
                  </div>
                </li>
                <li>
                  <div>
                    <h3>10</h3>
                    <span>小时</span>
                  </div>
                </li>
                <li>
                  <div>
                    <h3>34</h3>
                    <span>分钟</span>
                  </div>
                </li>
                <li>
                  <div>
                    <h3>60</h3>
                    <span>秒</span>
                  </div>
                </li>
              </ul>
              <h2 class="text-uppercase">本周热卖</h2>
              <p>新优惠<strong>5折</strong></p></p>
              <a class="primary-btn cta-btn" href="#">立即购买</a>
            </div>
          </div>
        </div>
        <!-- /row -->
      </div>
      <!-- /container -->
    </div>
    <!-- /HOT DEAL SECTION -->
    <div class="tlinks">Collect from <a href="http://www.cssmoban.com/" >网页模板</a></div>

    <!-- NEWSLETTER -->
    <div id="newsletter" class="section">
      <!-- container -->
      <div class="container">
        <!-- row -->
        <div class="row">
          <div class="col-md-12">
            <div class="newsletter">
              <!--<p>Sign Up for the <strong>NEWSLETTER</strong></p>-->
              <form>
                <input class="input" type="email" placeholder="请输入您的邮箱">
                <button class="newsletter-btn"><i class="fa fa-envelope"></i>&ensp;订阅</button>
              </form>
            </div>
          </div>
        </div>
        <!-- /row -->
      </div>
      <!-- /container -->
    </div>
    <!-- /NEWSLETTER -->

    <!-- FOOTER -->
    <footer id="footer">
      <!-- top footer -->
      <div class="section">
        <!-- container -->
        <div class="container">
          <!-- row -->
          <div class="row">
            <div class="col-md-3 col-xs-6">
              <div class="footer">
                <h3 class="footer-title">关于我们</h3>
                <ul class="footer-links">
                  <li><a href=""><i class="fa fa-hand-o-right"></i>
                  目前研发的是基于区块链技术的食品溯源系统，它具有高效性、安全性、可扩展性，
                以分布式核算，使每位用户可追溯食品来源，增强食品安全性，吃得更安心。</a></li>
                  <li><a href=""><i class="fa fa-map-marker"></i>深圳市南山区粤兴五道66号</a></li>
                  <li><a href=""><i class="fa fa-phone"></i>+0755-88666666</a></li>
                  <li><a href=""><i class="fa fa-envelope-o"></i>Apple@Apple.com</a></li>
                </ul>
              </div>
            </div>

            <div class="col-md-3 col-xs-6">
              <div class="footer">
                <h3 class="footer-title">产地</h3>
                <ul class="footer-links">
                  <li><a href="">新疆阿克苏红旗坡</a></li>
                  <li><a href="">甘肃省平凉市静宁县</a></li>
                  <li><a href="">云南昭通</a></li>
                  <li><a href="">山东烟台</a></li>
                  <li><a href="">陕西洛川</a></li>
                </ul>
              </div>
            </div>

            <div class="clearfix visible-xs"></div>

            <div class="col-md-3 col-xs-6">
              <div class="footer">
                <h3 class="footer-title">信息</h3>
                <ul class="footer-links">
                  <li><a href="">关于我们</a></li>
                  <li><a href="">联系我们</a></li>
                  <li><a href="">隐私政策</a></li>
                  <li><a href="">订单查询</a></li>
                  <li><a href="">English Site</a></li>
                </ul>
              </div>
            </div>

            <div class="col-md-3 col-xs-6">
              <div class="footer">
                <h3 class="footer-title">服务</h3>
                <ul class="footer-links">
                  <li><a href="">我的账户</a></li>
                  <li><a href="">查看购物车</a></li>
                  <li><a href="">心愿单</a></li>
                  <li><a href="">订单追踪</a></li>
                  <li><a href="">帮助</a></li>
                </ul>
              </div>
            </div>
          </div>
          <!-- /row -->
        </div>
        <!-- /container -->
      </div>
      <!-- /top footer -->

      <!-- bottom footer -->
      <div id="bottom-footer" class="section">
        <div class="container">
          <!-- row -->
          <div class="row">
            <div class="col-md-12 text-center">
              <ul class="footer-payments">
                <li><a href="#"><i class="fa fa-qq"></i></a></li>
                <li><a href="#"><i class="fa fa-wechat"></i></a></li>
                <li><a href="#"><i class="fa fa-pinterest"></i></a></li>
                <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#"><i class="fa fa-paper-plane"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
              </ul>

            </div>
          </div>
            <!-- /row -->
        </div>
        <!-- /container -->
      </div>
      <!-- /bottom footer -->
    </footer>
</body>
</html>
</template>
<script>

export default { 
  name: 'HelloWorld',
  watch: {
    '$route' (to, from) {
      this.$router.go(0);
    }
  },
  data () {
    return {
      cookie:'',
      datas:[{id:'Apple01',color:'红苹果',name:'蛇果'},{id:'Apple02',color:'青苹果',name:'青苹果'},{id:'Apple03',color:'红苹果',name:'水晶富士'},{id:'Apple04',color:'红苹果',name:'红富士'},{id:'Apple05',color:'黄苹果',name:'金帅'},{id:'Apple06',color:'红苹果',name:'红星'},{id:'Apple07',color:'黄苹果',name:'金冠'},{id:'Apple08',color:'红苹果',name:'红玉'}]
    }
  },methods:{

    delUsername:function(){
      this.delCookie('username');
      this.$router.push({path:'/'});
      window.location.reload();
    },
    getBuy:function(id){
        this.$router.push({path:'/buy',replace: true, query:{id:id}});
    },getCookie: function (cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      console.log("获取cookie,现在循环")
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        console.log(c)
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(name) != -1){
          return c.substring(name.length, c.length);
        }
      }
      return "";
    },
    delCookie :function (name) {
      var exp = new Date();
      exp.setTime(exp.getTime() - 1);
      var cval = this.getCookie(name);
      if (cval != null)
        document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
    },
    init(){
      this.cookie = this.getCookie("username");
      console.log(this.cookie);
    }
  },
  created(){
    this.init();

  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
@import '../../assets/css/font-awesome.min.css'
@import '../../assets/css/nouislider.min.css'
@import '../../assets/css/slick.css'
@import '../../assets/css/style.css'
</style>
